<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Vim-like bookmarklet</title>
<style>
/* css3 button borrowed from http://webdesignerwall.com/tutorials/css3-gradient-buttons */
body { background: #ededed; width: 800px; height: 2000px; margin: 30px auto; color: #999; font-family: "微软雅黑"; }
p { margin:10px 0 0 ; }
h1 { margin: 10px 0; }
a { color: #339; text-decoration: none; }
a:hover { text-decoration: underline; }
.button {
    display: inline-block;
    zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
    *display: inline;
    vertical-align: baseline;
    margin: 0 2px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em; 
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover { text-decoration: none; }
.button:active { position: relative; top: 1px; }
.bigrounded { -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; }
.medium { font-size: 12px; padding: .4em 1.5em .42em; }
.small { font-size: 11px; padding: .2em 1em .275em; }

/* green */
.green {
    color: #e8f0de;
    border: solid 1px #538312;
    background: #64991e;
    background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
    background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
}
.green:hover {
    background: #538018;
    background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
    background: -moz-linear-gradient(top,  #6b9d28,  #436b0c);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
}
.green:active {
    color: #a9c08c;
    background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
    background: -moz-linear-gradient(top,  #4e7d0e,  #7db72f);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
}

.title{vertical-align:bottom;}
.title span{margin-left:20px;font-size:12px;color:#f60;}
.msg-box p span, .msg-box p span{color:#FF7928;font-weight:bold;}
.msg-box hr{margin:40px 0}
.install-tip div{float:left;width:120px;height:40px;line-height:40px;}
.install-tip p{height:40px;line-height:40px}
address{text-align:right;}

.test-area{}
.test-area h3{font-weight:normal;}
</style>
</head>

<body>
    <h1 class="title" title="j, k, gg, G,...">Vim-like Bookmarklet<span>j, k, G, gg ...</span></h1>
    <address>用 vim 的按键来浏览网页, 给你的网页加上快捷键!</address>

    <!-- URLS -->
    <!--
       http://myhere.zl/myhere-2009-apps/vim-like-bookmarklet/vimlike-bookmarklet.php            [work]
       http://myhere.zl/google-code-trunk/vim-like-bookmarklet/vimlike-bookmarklet.php           [home ubuntu]
       http://demo.ued.taobao.net/linqian/app/vimlike-bookmarklet/vimlike-bookmarklet.php        [work demo]
    -->
    <!-- work demo machine -->
    <!--<a class="button green" href="javascript:(function(v){ !!v ? v.toggle() : (function(d, s) { s = document.createElement('script'); s.charset = 'utf-8'; s.src = 'http://demo.ued.taobao.net/linqian/app/vimlike-bookmarklet/vimlike-bookmarklet.php?t=' + (+new Date); d.getElementsByTagName('head')[0].appendChild(s); })(document); })(window.VimBookmarklet);">Vimlike</a>-->
    <!--work machine-->
    <!--<a class="button green" href="javascript:(function(v){ !!v ? v.toggle() : (function(d, s) { s = document.createElement('script'); s.charset = 'utf-8'; s.src = 'http://linqian/myhere-2009-apps/vim-like-bookmarklet/vimlike-bookmarklet.php?t=' + (+new Date); d.getElementsByTagName('head')[0].appendChild(s); })(document); })(window.VimBookmarklet);">Vimlike</a>-->
    <!--home ubuntu machine-->
    <!--<a class="button green" href="javascript:(function(v){ !!v ? v.toggle() : (function(d, s) { s = document.createElement('script'); s.charset = 'utf-8'; s.src = 'http://myhere.zl/google-code-trunk/vim-like-bookmarklet/vimlike-bookmarklet.php?t=' + (+new Date); d.getElementsByTagName('head')[0].appendChild(s); })(document); })(window.VimBookmarklet);">Vimlike</a>-->

    <div class="msg-box">
        <h2>试一试?</h2>
        
        <p>请将输入法切换到英文状态, <a class="button green" href="javascript:(function(v){ !!v ? v.toggle() : (function(d, s) { s = document.createElement('script'); s.charset = 'utf-8'; s.src = 'http://demo.ued.taobao.net/linqian/app/vimlike-bookmarklet/vimlike-bookmarklet.php?t=' + (+new Date); d.getElementsByTagName('head')[0].appendChild(s); })(document); })(window.VimBookmarklet);">点我启用</a>, 然后按 <span>?[按住Shift]</span> 查看帮助.<p>
        
        <hr />

        <h2>给自己的浏览器加上这个功能?</h2>
        <h3>Step 1: 保存</h3>
        <div class="install-tip">
            <div><a class="button green" href="javascript:(function(v){ !!v ? v.toggle() : (function(d, s) { s = document.createElement('script'); s.charset = 'utf-8'; s.src = 'http://demo.ued.taobao.net/linqian/app/vimlike-bookmarklet/vimlike-bookmarklet.php?t=' + (+new Date); d.getElementsByTagName('head')[0].appendChild(s); })(document); })(window.VimBookmarklet);">Vimlike</a></div>
            <p id="install-tip"></p>
        </div>
        <h3>Step 2: 使用</h3>
        <p id="use-tip"></p>

        <h2>Project Hosting</h2>
        <ul>
            <li><a target="_blank" href="http://code.google.com/p/myhere-2009-apps/">Project Home</a></li>
            <li><a target="_blank" href="http://code.google.com/p/myhere-2009-apps/source/browse/trunk/vim-like-bookmarklet/vimlike-bookmarklet.js">Code</a></li>
        </ul>
    </div>

    <address title="I did this just for fun!">--myhere.2009@gmail.com</address>

    <hr />
    <h2>以下用于测试</h2>
    <div class="test-area">
        <h3>f or F 获取链接</h3>
        <p><a target="_blank" href="http://twitter.com/#!/myhere_2009">@myhere_2009</a> | <a href="http://gplus.to/myhere">Google+</a> | <a href="http://www.facebook.com/profile.php?id=1812567088">Facebook</a></p>
        <h3>gi 输入</h3>
        <p>
            <input type="hidden" />
            <input type="checkbox" />
            <input type="radio" />
            <input type="file" />
            <input type="reset" />
            <input type="submit" />
        </p>
        <p><input value="hello world" /></p>
        <p><input placeholder="vimlike bookmarklet" /></p>
        <p><input type="email" /></p>
        <p><input type="url" /></p>
        <p><input type="number" /></p>
        <p><input type="range" /></p>
        <p><input type="datetime" /></p>
        <p><input type="datetime-local" /></p>
        <p><input type="search" /></p>
        <p><input type="color" /></p>
    </div>
<script>
(function() {
function detectBrowser() {
    var ua = navigator.userAgent,
        browser = 'other';

    if (/MSIE/.test(ua)) {
        browser = 'msie';
    } else if (/Firefox/.test(ua)) {
        browser = 'firefox';
    } else if (/Safari/.test(ua)) {
        if (/Chrome/.test(ua)) {
            browser = 'chrome';
        } else {
            browser = 'safari';
        }
    } else if (/Opera/.test(ua)) {
        browser = 'opera';
    } else {
        browser = 'other';
    }

    return browser;
}

function showInstallTip() {
    var browser = detectBrowser(),
    install_tip_map = {
        'msie': '<span>右键</span>点击左面的按钮, 选择右键菜单中的 "<span>添加到收藏夹...</span>".',
        'firefox': '<span>右键</span>点击左面的按钮, 选择右键菜单中的 "<span>将此链接加为书签</span>".',
        'chrome': '按 <span>Ctrl + Shift + B</span>. 显示书签栏后，直接将左面的按钮拖拽到浏览器书签栏.',
        'safari': '按 <span>Ctrl + Shift + B</span> 显示书签栏后，直接将左面的按钮拖拽到浏览器书签栏.',
        'opera': '<span>右键</span>点击左面的按钮, 选择右键菜单中的 "<span>将此链接加为书签</span>".',
        'other': '<span>右键</span>点击左面的按钮, 选择右键菜单中的 "<span>添加到收藏夹...</span>".'
    },
    use_tip_map = {
        'msie': '',
        'firefox': '',
        'chrome': '',
        'safari': '',
        'opera': '',
        'other': ''
    },
    use_tip = '浏览其它页面时, 点击浏览器收藏夹中的 "<span>Vimlike</span>". 按 <span title="按住 shift 哦!">?</span> 查看帮助!';

    document.getElementById('install-tip').innerHTML = install_tip_map[browser];
    document.getElementById('use-tip').innerHTML = use_tip;
}

showInstallTip();
})();
</script>

<script type="text/html">
(function(v){
    !!v ? v.toggle() : (function(d, s) {
        s = document.createElement('script');
        s.charset = 'utf-8';
        s.src = 'http://myhere.zl/google-code-trunk/vim-like-bookmarklet/vimlike-bookmarklet.php?t=' + (+new Date);
        d.getElementsByTagName('head')[0].appendChild(s);
    })(document);
})(window.VimBookmarklet);
</script>
</body>
</html>
<!-- vim: set ft=html: -->
